<!--
value           =====>   双向数据绑定，v-model

Method
ok              =====>   多选，点击确认时
cancel          =====>   多选，点击取消时
-->
<template>
  <div class="choose-icon">
    <div class="show-icon" @click="open">
      <span v-if="value" class="choose">
        <component :is="value"></component>
      </span>
      <span class="no-choose" v-else>+</span>
    </div>
    <a-modal v-model:open="visible" title="图标选择器" class="choose-modal" @ok="onConfirm">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="0" tab="线框风格" class="item-wrapper">
          <div class="item" v-for="(group, ii) in icon1" :key="ii">
            <div class="item-title">{{ group.name }}</div>
            <a-row :gutter="[10, 15]" v-if="group.children && group.children.length">
              <a-col :span="4" v-for="(item, iii) in group.children" :key="iii" @click="onClick(item.icon)">
                <div class="item-icon" :class="defaultValue === item.icon ? 'active': ''" :icon="item.icon">
                  <component :is="item.icon"></component>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
        <a-tab-pane key="1" tab="实底风格" class="item-wrapper">
          <div class="item" v-for="(group, ii) in icon2" :key="ii">
            <div class="item-title">{{ group.name }}</div>
            <a-row :gutter="[10, 15]" v-if="group.children && group.children.length">
              <a-col :span="4" v-for="(item, iii) in group.children" :key="iii" @click="onClick(item.icon)">
                <div class="item-icon" :class="defaultValue === item.icon ? 'active': ''" :icon="item.icon">
                  <component :is="item.icon"></component>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="双色风格" class="item-wrapper">
          <div class="item" v-for="(group, ii) in icon3" :key="ii">
            <div class="item-title">{{ group.name }}</div>
            <a-row :gutter="[10, 15]" v-if="group.children && group.children.length">
              <a-col :span="4" v-for="(item, iii) in group.children" :key="iii" @click="onClick(item.icon)">
                <div class="item-icon" :class="defaultValue === item.icon ? 'active': ''" :icon="item.icon">
                  <component :is="item.icon"></component>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>

        <template #rightExtra>
          <a-input-search
              v-model:value="searchValue"
              placeholder="搜索图标"
              style="width: 180px"
              @search="onSearch"
          />
        </template>

      </a-tabs>
    </a-modal>
  </div>
</template>

<script setup>
import cloneDeep from 'lodash.clonedeep'
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import Icon1Json from './icon-1.json'
import Icon2Json from './icon-2.json'
import Icon3Json from './icon-3.json'

const emit = defineEmits(['update:value'])
const props = defineProps({
  value: {
    type: String,
    default: ''
  }
})
const defaultValue = ref('')
const visible = ref(false)
const loading = ref(false)
const searchValue = ref('')
const activeKey = ref('0')
const icon1 = ref(Icon1Json)
const icon2 = ref(Icon2Json)
const icon3 = ref(Icon3Json)


onMounted(() => {
  defaultValue.value = props.value
})

/**
 * 选择图标
 * @param value
 */
const onClick = (value) => {
  defaultValue.value = value
  // emit('ok', value)
  // emit('update:value', value)
}

const onConfirm = () => {
  if(!defaultValue.value) {
    message.warning('请先选择图标')
  }else{
    // emit('ok', defaultValue.value)
    emit('update:value', defaultValue.value)
    close()
  }
}

/**
 * 搜索
 * @param value
 */
const onSearch = (value) => {
  searchValue.value = value
  let data1 = cloneDeep(Icon1Json)
  let data2 = cloneDeep(Icon2Json)
  let data3 = cloneDeep(Icon3Json)

  if (value) {
    data1 = cloneDeep(data1)
    data1.forEach(group => {
        group.children = group.children.filter(n => n.icon.includes(value) || n.name.includes(value))
    })

    data2 = cloneDeep(data2)
    data2.forEach(group => {
      group.children = group.children.filter(n => n.icon.includes(value) || n.name.includes(value))
    })

    data3 = cloneDeep(data3)
    data3.forEach(group => {
      group.children = group.children.filter(n => n.icon.includes(value) || n.name.includes(value))
    })
  } else {
    icon1.value = data1
    icon2.value = data2
    icon3.value = data3
  }
  icon1.value = data1
  icon2.value = data2
  icon3.value = data3
}
const open = () => {
  visible.value = true
}
const close = () => {
  activeKey.value = '0'
  visible.value = false
  if(searchValue.value) {
    icon1.value = Icon1Json
    icon2.value = Icon2Json
    icon3.value = Icon3Json
  }
  searchValue.value = ''
}
defineExpose({ open, close })
</script>

<style lang="less" scoped>
.show-icon {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;

  .choose {
    //font-size: 18px;
  }
  .no-choose {
    color: #a8abb2;
  }
}

.choose-modal {
  padding: 15px 0;

  .item-wrapper {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .item {
    margin: 20px 0;

    &:first-child {
      margin: 0;
    }
    .item-title {
      margin-bottom: 10px;
    }
    .item-icon {
      border: 1px solid #eee;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      &.active {
        border-color: #1890ff;
      }
    }
  }
}
</style>
